<template>
  <div class="galaxy-user feature-out">
    <div class="filter-container">
      <el-input
        v-model="listQuery.search"
        size="small"
        placeholder="请输入渠道CODE或渠道名称查询"
        style="width: 260px;margin-right: 12px"
      ></el-input>
      <el-button type="primary" size="small" @click="query">查询</el-button>
      <el-button type="primary" size="small" @click="reset">重置</el-button>
    </div>
    <div style="text-align: end;margin-bottom: 16px">
      <el-button type="primary" size="small" @click="openDialog('add', '')">
        添加渠道
      </el-button>
    </div>
    <el-scrollbar>
      <el-table :data="channelList">
        <el-table-column prop="channelCode" label="渠道CODE"></el-table-column>
        <el-table-column prop="channelName" label="渠道名称"></el-table-column>
        <el-table-column label="创建人/修改人">
          <template slot-scope="scope">
            {{
              (scope.row.createUser !== '' ? scope.row.createUser : '-') +
                '/' +
                (scope.row.updateUser !== '' ? scope.row.updateUser : '-')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="创建时间"></el-table-column>
        <el-table-column prop="updateAt" label="更新时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="openDialog('update', scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="deleted(scope.row.channelId)"
              slot="reference"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="productDialog"
      :title="dialogTitle"
      class="new-dialog"
      width="500px"
    >
      <el-form
        ref="dialogForm"
        :model="createdItem"
        :rules="rules"
        label-width="100px"
        :status-icon="true"
      >
        <el-form-item prop="channelCode" label="渠道CODE">
          <el-input
            v-model="createdItem.channelCode"
            :disabled="dialogTitle === '编辑渠道'"
            size="mini"
            @change="delKong('channelCode')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="channelName" label="渠道名称">
          <el-input
            v-model="createdItem.channelName"
            size="mini"
            @change="delKong('channelName')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="productDialog = false">取消</el-button>
        <el-button size="mini" type="primary" @click="save()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { Form } from 'element-ui'
import {
  getList,
  create,
  update,
  del,
  allChannel
} from '@/api/risksystem/trustTrial/channel'
@Component({
  name: 'channel'
})
export default class extends Vue {
  private listQuery: any = {
    search: null,
    limit: 10,
    page: 1
  }
  private channelList: any = []
  private productDialog = false
  private dialogTitle = ''
  private btnLoading: boolean = false
  private visible: any = false
  private total: any = 0
  // 弹框校验
  private code: Function = (rule: any, value: any, callback: Function) => {
    let reg = /^[a-zA-Z0-9_]{1,64}$/
    if (reg.test(value) === false) {
      callback(new Error('仅限英文、数字及下划线且低于64个字符'))
    } else {
      callback()
    }
  }
  private delKong(val: any) {
    this.$set(this.createdItem, val, this.createdItem[val].replace(/\s+/g, ''))
  }
  private createdItem: any = {
    channelCode: null,
    channelName: null
  }
  private rules: any = {
    channelCode: [
      { required: true, message: '请填写渠道CODE', trigger: 'blur' },
      { validator: this.code, trigger: 'blur' }
    ],
    channelName: [
      { required: true, message: '请填写渠道名称', trigger: 'blur' }
    ]
  }
  created() {
    this.getList()
  }
  mounted() {
    //mounted 钩子
  }
  // 列表
  private async getList() {
    const { data } = await getList(this.listQuery)
    this.channelList = data.list
    this.total = data.total
  }
  // 跳转页码查询
  private handleCurrentChange(val: any) {
    this.listQuery.page = val
    this.getList()
  }
  // size切换查询
  private handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  // 查询
  private query() {
    this.getList()
  }
  // 重置
  private reset() {
    this.listQuery = {
      search: null,
      limit: 10,
      page: 1
    }
    this.getList()
  }
  // 创建/新增
  private openDialog(type: any, val: any) {
    this.productDialog = true
    this.$nextTick(() => {
      ;(this.$refs['dialogForm'] as Form).clearValidate()
    })
    this.createdItem = {
      channelCode: null,
      channelName: null
    }
    if (type === 'add') {
      this.dialogTitle = '添加渠道'
    } else {
      this.dialogTitle = '编辑渠道'
      this.createdItem = {
        channelCode: val.channelCode,
        channelName: val.channelName,
        channelId: val.channelId
      }
    }
  }
  // 保存产品
  private save() {
    ;(this.$refs['dialogForm'] as Form).validate(async valid => {
      if (valid) {
        this.btnLoading = true
        if (this.dialogTitle === '添加渠道') {
          this.create()
        } else {
          this.update()
        }
        this.getList()
      }
    })
  }
  private async create() {
    try {
      const { data } = await create(this.createdItem)
      this.$message.success('添加成功！')
      this.productDialog = false
    } finally {
      //
      this.btnLoading = false
    }
  }
  private async update() {
    try {
      const { data } = await update(this.createdItem)
      this.$message.success('更新渠道成功！')
      this.productDialog = false
    } finally {
      //
      this.btnLoading = false
    }
  }
  // 删除
  private deleted(val: any) {
    this.$confirm('确认删除该渠道?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.del(val)
      })
      .catch(() => {})
  }
  // 删除
  private async del(val: any) {
    try {
      const { data } = await del({ channelId: val })
      this.$message.success('删除成功！')
    } finally {
      this.getList()
      console.log(val)
    }
  }
}
</script>
